<template>
	<view class="show-card">

		<view class="card-title">
			<uni-title :title="title" type="h3"></uni-title>
			<text style="color: #007AFF;" @click="more" v-if="desc">{{desc}}</text>
		</view>

		<block v-for="book in list" v-if="type==='vertical'">
		    <!-- #ifdef APP-PLUS || H5-->
			<book-card v-bind="book" :tags="[book.state,book.classify,book.id]" type="list" style="margin-bottom: 10px;"
				:link="'/pages/contents/contents?id='+book.id" isLink :card-id="book.id">
			</book-card>
			<!-- #endif -->
			
			<!-- #ifdef MP -->
			<book-card  :tags="[book.state,book.classify,book.id]" type="list" style="margin-bottom: 10px;"
				:link="'/pages/contents/contents?id='+book.id" isLink :card-id="book.id"
				:name="book.name" :author="book.author" :img="book.img" 
				:sourceSite="book.sourceSite" :synopsis="book.synopsis">
			</book-card>
			<!-- #endif -->
		</block>

		<block v-if="type==='horizontal'">
			<scroll-list :list="list" @scrollClick="scrollClick"></scroll-list>
		</block>
	</view>
</template>

<script>
	export default {
		name: "show-card",
		data() {
			return {

			};
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			type: {
				type: String,
				// vertical 纵向  horizontal 横向
				default: "horizontal"
			},
			title: {
				default: "",
				type: String
			},
			desc: {
				default: "",
				type: String
			}
		},
		methods: {
			scrollClick(id) {
				uni.navigateTo({
					url: '/pages/contents/contents?id=' + id
				})
			},
			more() {
				this.$emit("more")
			}
		}
	}
</script>

<style lang="scss">
	.show-card {
		.card-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
	}
</style>
